﻿@using System.Text
@using OA.Model
@using OA.AspNetCore.Html
@using OA.Core.Model
@using OA.Core.Helper

@{
    Layout = "~/Areas/Member/Views/Shared/_Layout.cshtml";
    CustomForm infoCustomForm = ViewBag.CustomForm;
}
<link rel="stylesheet" type="text/css" href="@ViewBag.OssUrl/admin/processtree/style/jsmind.css" />
<style type="text/css">
    .fly-panel-user{height:100%;width:100%;padding:0px!important;}
    .ul-context-menu {
        list-style: none;
        z-index: 99999999;
        padding: 5px 0;
        min-width: 80px;
        margin: 0;
        font-family: "微软雅黑";
        font-size: 14px;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, .15);
        box-sizing: border-box;
        border-radius: 4px;
        -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        -o-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

        .ul-context-menu .ui-context-menu-item {
            margin: 0;
            padding: 0;
        }

            .ul-context-menu .ui-context-menu-item a {
                display: block;
                padding: 0 10px;
                color: #333;
                white-space: nowrap;
                text-decoration: none;
            }

                .ul-context-menu .ui-context-menu-item a:hover {
                    text-decoration: none;
                    color: #262626;
                }

            .ul-context-menu .ui-context-menu-item .icon {
                width: 16px;
                height: 16px;
                margin-right: 8px;
                vertical-align: sub;
                border: 0;
            }

        .ul-context-menu li {
            text-align: center;
            border-bottom: 1px solid #ccc;
        }

            .ul-context-menu li.last {
                border-bottom: none;
            }

        .ul-context-menu a {
            display: inline-block;
            height: 28px;
            line-height: 28px;
            text-decoration: none;
            text-align: center;
            color: #000;
        }
</style>

<div id="jsmind_container" style="width:100%;height:800px"></div>
<div style="display:none;" class="mymenu">
    <div style="width:120px;" class="ul-context-menu">
        <ul>
            <li>
                <a href="javascript:addparent()">新增上级</a>
            </li>
            <li>
                <a href="javascript:addchild()">新增下级</a>
            </li>
            <li>
                <a href="javascript:editPoint()">编辑节点</a>
            </li>
            <li class="last">
                <a href="javascript:DeletePoint()">删除节点</a>
            </li>
        </ul>
    </div>
</div>
<script src="@ViewBag.OssUrl/admin/processtree/js/jsmind.js" type="text/javascript"></script>
<script src="@ViewBag.OssUrl/admin/processtree/js/jsmind.draggable.js" type="text/javascript"></script>
<script type="text/javascript">
        var contextmenuContent = $(".mymenu").html();
        var _jm = null;
        function load_jsmind() {
            var mind = {
                "meta": {
                    "name": "demo",
                    "author": "hizzgdev@163.com",
                    "version": "0.2"
                },
                "format": "node_array",
                "data": @Html.Raw(ViewBag.Results)
            };
            var options = {
                container: 'jsmind_container',
                editable: true,
                theme: 'primary',
                mode: 'full'
            };
            _jm = jsMind.show(options, mind);
        }
        function get_selected_nodeid() {
            var selected_node = _jm.get_selected_node();
            if (selected_node) {
                return selected_node.id;
            }
            else {
                return null;
            }
        }
    function callmovedBack(src_node_id, target_node_id) {
        $.getJSON("/Management/ApprovalTree/Remove", { CustomFormID: @infoCustomForm.ID, NodeID: src_node_id, parentNodeID: target_node_id, IsPre: true }, function (result) {
                if (result.State == 200) {

                }
                else {
                    layer.msg(result.Message);
                }
            });
        }
        var currentNodeID = "0";
        load_jsmind();
        layui.use(['layer'], function () {
            var layer = layui.layer;
            $("jmnode").on('contextmenu', function (e) {
                ccurrentNodeID=get_selected_nodeid();
                e.preventDefault();
                var selected_nodeid = get_selected_nodeid();
                if (_jm.mind.root.id != selected_nodeid) {
                    $(".ul-context-menu ul li").eq(0).html('<a href="javascript:;" style="text-decoration:line-through;">新增上级</a>');
                }
                else {
                    $(".ul-context-menu ul li").eq(0).html('<a href="javascript:addparent()">新增上级</a>');
                }
                contextmenuContent = $(".mymenu").html();
                layer.open({
                    title: false,
                    type: 1,
                    closeBtn: 0,
                    shadeClose: true,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['120px', '128px'], //宽高
                    offset: [e.pageY, e.pageX],//位置
                    content: contextmenuContent
                });
            });
        });
</script>
<script type="text/javascript">
    function DeletePoint() {
        var nodeid = get_selected_nodeid();
        console.log(nodeid);
        layer.confirm('您确认需要删除该节点吗？', {
            btn: ['我要删除', '不小心点错了'], title: '节点删除确认'
        }, function () {
            var url = "/Management/ApprovalTree/Delete?IsPre=true&CustomFormID=@infoCustomForm.ID&NodeID=" + nodeid;
            $.getJSON(url, function (data) {
                if (data.State == 200) {
                    _jm.remove_node(get_selected_nodeid());
                    layer.closeAll();
                }
                else {
                    layer.msg(data.Msg);
                }
            });
        }, function () {

        });
    }

    function addchild() {
        var selected_id = get_selected_nodeid();
        layer.open({
            type: 2,
            title: '添加节点',
            shadeClose: true,
            shade: false,
            maxmin: false,
            area: ['1100px', '800px'],
            content: "/Management/ApprovalTree/AddPoint?IsPre=true&CustomFormID=@infoCustomForm.ID&parentNodeID=" + selected_id
        });
    }

    function addparent() {
        var selected_id = get_selected_nodeid();
        layer.open({
            type: 2,
            title: '添加上级节点',
            shadeClose: true,
            shade: false,
            maxmin: false,
            area: ['1100px', '800px'],
            content: "/Management/ApprovalTree/AddParentPoint?IsPre=true&CustomFormID=@infoCustomForm.ID&nodeID=" + selected_id
        });
    }

    function editPoint() {
        var selected_id = get_selected_nodeid();
        layer.open({
            type: 2,
            title: '编辑节点',
            shadeClose: true,
            shade: false,
            maxmin: false,
            area: ['1100px', '800px'],
            content: '/Management/ApprovalTree/EditPoint?IsPre=true&CustomFormID=@infoCustomForm.ID&NodeID=' + selected_id
        });
    }
    function showData() {
        alert(JSON.stringify(_jm.get_data("node_array").data));
    }
</script>
<style type="text/css">
    .layui-layer-rim {
        border: 1px rgba(0, 0, 0, .15);
    }
</style>

